import React, { memo, useState, useEffect } from 'react'

import Input from '@/components/Input'

import styles from './index.module.scss'

import NavBar from '@/components/NavBar'

import Textarea from '@/components/Textarea'

import { editProfile } from '@/pages/Profile/store/action'

import { useDispatch } from 'react-redux'

import { Toast } from 'antd-mobile'

export default memo(function EditInput(props) {
  const [value, setValue] = useState(props.value)

  const dispatch = useDispatch()

  useEffect(() => {
    setValue(props.value)
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [props.value])

  const onCommit = (val) => {
    dispatch(editProfile({ [props.type === '昵称' ? 'name' : 'intro']: val }))
    Toast.success(`修改${props.type}成功!`)
    props.onsubInfo()
  }

  return (
    <div className={styles.root}>
      <NavBar
        rightContent={<span onClick={() => onCommit(value)}>提交</span>}
        onLeftClick={() => {
          setValue('')
          return props.onClick()
        }}
      >
        编辑{props.type}
      </NavBar>
      <h3>{props.type}</h3>
      {props.type === '昵称' ? (
        <Input
          className="input-wrap"
          value={value}
          onChange={(e) => setValue(e.target.value)}
        />
      ) : (
        <Textarea
          maxLength={200}
          placeholder="请输入简介"
          value={value}
          onChange={(e) => setValue(e)}
        />
      )}
    </div>
  )
})
